/**
* Created by wl
* 项目管理>持有中-添加页编辑信息头部
*/
<template>
    <div  :class="{'ca-box': $route.name.includes('add'), 'ca-m-t-28':  $route.name.includes('add'), 'ca-p-20': $route.name.includes('add')}">
        <el-form ref="form1" label-width="150px">
            <div class="header">
                <div class="header__photo">
                    <div class="csLogoImgEdit">
                        <csLogoImg :item="itemHoldTopDTO.itemEntity" @getId="getId"></csLogoImg>
                    </div>
                </div>
                <div class="header__body">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="项目全称" required>
                                <el-input type="text" v-model="itemHoldTopDTO.itemEntity.itemFullname" :maxlength="100">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6"  class="el-right" v-show="$route.params.itemId!=='-1' && $route.name.indexOf('add') == -1">
                            <el-button type="primary" @click="save" size="small">保存</el-button>
                            <el-button @click="cancel" size="small">取消</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="项目简称" required>
                                <el-input type="text" v-model="itemHoldTopDTO.itemEntity.itemName" :maxlength="100">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                     <el-row>
                        <el-col :span="12">
                            <el-form-item label="项目状态">
                                <el-input type="text" v-model="projectStatus" :disabled="true">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div>
                <el-row>
                    <el-col :span='12'>
                        <el-form-item label="投后负责人">
                            <el-select v-model="itemHoldTopDTO.voteAfterUsers" class="el-width" multiple placeholder="请选择">
                                <el-option
                                v-for="item in dropDown.guest"
                                :key="item.id"
                                :label="item.userName"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="行业" required>
                            <el-select v-model="industry" class="el-width" placeholder="请选择" @change="selectIndustry">
                                <el-option
                                v-for="item in dropDown.industry"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="拟退出方式">
                            <el-checkbox-group v-model="itemExit" @change="change">
                                <el-checkbox v-for="(item, index) in dropDown.itemExit" :label="item.name" :key="index" :value="item.id"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <csProjectTeam v-model="itemHoldTopDTO.itemGroupUsers"></csProjectTeam>
                    </el-col>
                </el-row>
                <el-row class="ca-m-t-28">
                    <el-col :span="24">
                        <el-form-item label="项目介绍" label-width="90px">
                            <el-input type="textarea" :rows="4" v-model="itemHoldTopDTO.itemEntity.itemInfo" :maxlength="3000">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </div>
</template>
<script type="text/ecmascript-6">
    import {api} from '../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    export default {
        data() {
            return {
                value: '',
                projectStatus: '持有中',
                itemExit: [],
                industry: '', //行业
                itemHoldTopDTO: {
                    exitEntityList: [], // 拟退出方式 对应ID
                    itemEntity: {
                        heldStatus: 2, //持有状态：0-潜在投资，1-拟投资，2-持有中，3-减持，4-已退出
                        id: null, //项目id
                        itemFullname: '', //项目全称
                        itemImg: '', // 项目图片
                        itemInfo: '', //项目简介
                        itemName: '', //项目简称
                        itemType: 0, //项目类型：0-股权，1-债权
                    },
                    itemGroupUsers: [], //投后项目组成员
                    itemId: null, //项目Id
                    itemIndustryEntity: [], //行业 对应ID
                    voteAfterUsers: [], //投后负责人
                },
                dropDown: {
                    itemExit: this.$store.state.user.dictionaryMap.itemExit, // 拟退出方式
                    industry: this.$store.state.user.dictionaryMap.industry, // 行业
                    guest: this.$store.state.user.department.userEntityList, //投后负责人
                }
            }
        },
        watch: {
            // 深度 watcher
            itemHoldTopDTO: {
                handler: function (itemHoldTopDTO) {
                    this.$emit('headerInfo', itemHoldTopDTO);
                },
                deep: true
            }
        },
        props: {
        },
        mounted() {
            this.$emit('headerInfo', this.itemHoldTopDTO)
            if (this.$route.params.itemId !== '-1' && !this.$route.name.includes('add')) {
                this.getHeaderInfo()
            } else if (this.$route.params.itemId !== '-1' && this.$route.name.includes('add')) {
                this.getPreInfo()
            }
        },
        methods: {
            // 行业
            selectIndustry() {
                this.itemHoldTopDTO.itemIndustryEntity[0] = this.industry
            },
            // 上传logo的id
            getId(val) {
                this.itemHoldTopDTO.itemEntity.itemImg = val
            },
            cancel() {
                this.$emit('close')
            },
            change() {
                this.itemHoldTopDTO.exitEntityList = []
                this.itemExit.map(item => {
                    this.dropDown.itemExit.map( val => {
                        if (item === val.name) {
                            this.itemHoldTopDTO.exitEntityList.push(val.id)
                        }
                    })
                })
            },
             // 获取头部信息
            getHeaderInfo() {
                apiHttp(api.CHECK_HEADER, {itemId: this.$route.params.itemId}).then(ret => {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.itemHoldTopDTO = ret.data
                        // this.itemHoldTopDTO.itemEntity.heldStatus = 2
                        if (this.itemHoldTopDTO.itemEntity.heldStatus === 4) {
                            this.projectStatus = '已退出';
                        } else {
                            this.projectStatus = '持有中';
                        }
                        this.itemExit = []
                        ret.data.exitEntityList.map(item => {
                            this.dropDown.itemExit.map( val => {
                                if (item === val.id) {
                                    this.itemExit.push(val.name)
                                }
                            })
                        })
                        this.industry = this.itemHoldTopDTO.itemIndustryEntity[0]
                    }
                })
            },
            // 获取拟投资信息（一键转投后）
            getPreInfo() {
                apiHttp(api.CHECK_HEADER, {itemId: this.$route.params.itemId}).then(ret => {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        // this.itemHoldTopDTO = ret.data
                        this.itemHoldTopDTO.itemEntity = ret.data.itemEntity
                        this.itemHoldTopDTO.exitEntityList = ret.data.exitEntityList
                        this.itemHoldTopDTO.itemGroupUsers = ret.data.itemGroupUsers
                        this.itemHoldTopDTO.itemIndustryEntity = ret.data.itemIndustryEntity
                        this.itemHoldTopDTO.voteAfterUsers = ret.data.voteAfterUsers
                        this.itemHoldTopDTO.itemEntity.heldStatus = 2
                        this.itemExit = []
                        ret.data.exitEntityList.map(item => {
                            this.dropDown.itemExit.map( val => {
                                if (item === val.id) {
                                    this.itemExit.push(val.name)
                                }
                            })
                        })
                        this.industry = this.itemHoldTopDTO.itemIndustryEntity[0]
                    }
                })
            },
            save() {
                if (!this.itemHoldTopDTO.itemEntity.itemFullname) {
                    this.$message({
                        message: '请输入项目全称',
                        type: 'error',
                        center: true
                    });
                    return false;
                } else if (!this.itemHoldTopDTO.itemEntity.itemName) {
                    this.$message({
                        message: '请输入项目简称',
                        type: 'error',
                        center: true
                    });
                    return false;
                } else if (this.itemHoldTopDTO.itemIndustryEntity.length === 0) {
                    this.$message({
                        message: '请选择行业',
                        type: 'error',
                        center: true
                    });
                    return false;
                } else {
                    let query = {
                        exitEntityList: this.itemHoldTopDTO.exitEntityList,
                        itemEntity: this.itemHoldTopDTO.itemEntity,
                        itemGroupUsers: this.itemHoldTopDTO.itemGroupUsers,
                        itemId: this.$route.params.itemId,
                        itemIndustryEntity: this.itemHoldTopDTO.itemIndustryEntity,
                        voteAfterUsers: this.itemHoldTopDTO.voteAfterUsers
                    }
                    apiHttp(api.EDIT_HEADER, query).then(ret => {
                        if (ret.resCode === STATUS_HTTP_SUCCESS) {
                            this.$message({
                                message: '修改成功！',
                                type: 'success',
                                center: true
                            });
                            this.$emit('save');
                        }
                    })
                }
            },
        },
        components: {
            csProjectTeam: require('../project-team/index'),
            csLogoImg: require('__components/logo-img/edit')//logo
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.csLogoImgEdit {
  text-align: center;
  width: 208px;
  height: 147px;
  padding-top: 15px;
  margin-bottom: 25px;
}
.el-right {
    float: right;
}
.header {
  display: flex;
  height: auto;
}
.header__photo {
  display: flex;
  height: auto;
  justify-content: center;
  margin-right: 20px;
}
.header__body {
  flex: 1;
}
.el-width {
    width: 100%;
}
.el-m-t-20 {
    margin-top: -20px;
}
</style>
